<template>
  <div class="bbx">
    <span>{{ tail.shopname }}</span>
    <!-- 页面 -->
    <div class="tabox">
      <img :src="tail.img" alt="" />
      <div class="taibox">
        <h3 class="tebox">{{ tail.shopname }}</h3>
        <span style="color:#A2A2A3">商品属性规格或描述 </span>
        <div class="tailbox">
          会员价<span style="color:red;font-size:20px;"
            >￥{{ tail.price }}</span
          >
          <span>金卡价******</span>
        </div>
        <span style="font-size:14px;color:#A2A2A3"> 库存:{{ tail.stock }}</span>
        <div class="numbox">
          购买数量:<el-input-number
            v-model="num"
            @change="handleChange"
            :min="1"
            :max="10"
            label="描述文字"
          ></el-input-number>
        </div>
        <div class="plbox">
          <p>用户评论（8）</p>
          <p style="color:red" class="hlbox">99%好评></p>
        </div>
      </div>

      <!-- 评论 -->
      <div class="comm">
        <div class="com">
          <div class="coin">
            <img
              src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1565848508637&di=5fac108f0a5cdc82318723c4d0cb8e67&imgtype=0&src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F01%2F56%2F69%2F585747cfd354024.jpg"
              alt=""
              width="50px"
              height="50px"
            />
            12312312332132132321323232323213213232321
          </div>
        </div>
      </div>
    </div>
    <!-- 底部 -->
    <div class="bobox">
      <div class="home">
        <svg
          t="1565849442000"
          class="homm"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="2253"
          width="32"
          height="32"
        >
          <path
            d="M811.255 513.554c-19.509 0-35.31 15.819-35.31 35.31V861.29c-2.578 47.51-15.607 57.662-61.281 59.78l-399.731 0.3c-52.365-1.465-66.595-10.699-68.643-66.595V548.864c0-19.491-15.82-35.31-35.31-35.31-19.51 0-35.311 15.819-35.311 35.31V921c0 46.31 34.957 69.208 81.284 69.208h41.931v0.37l421.835-0.282v-0.088h41.931c46.31 0 83.827-22.899 83.827-69.208V876.49h0.106V548.864c-0.017-19.509-15.837-35.31-35.328-35.31z m192.318-5.209L542.614 48.728a28.062 28.062 0 0 0-4.837-6.532c-8.51-8.51-18.891-11.158-29.184-9.552-7.928 0.442-15.731 3.673-22.581 10.523-0.23 0.23-0.354 0.512-0.565 0.76-1.236 1.058-2.507 2.012-3.673 3.195L18.556 509.016C2.189 525.383 0.53 538.801 16.914 555.15c16.366 16.384 33.068 18.026 49.434 1.66l445.087-437.46 447.612 436.789c16.384 16.384 33.068 14.724 49.452-1.66 16.348-16.348 11.458-29.749-4.926-46.133z m-262.939-365.55h105.932v105.931c0 19.491 15.8 35.31 35.31 35.31 19.491 0 35.31-15.819 35.31-35.31V107.485c0-19.492-15.819-35.31-35.31-35.31H740.634c-19.508 0-35.31 15.818-35.31 35.31s15.802 35.31 35.31 35.31z"
            fill=""
            p-id="2254"
          ></path>
        </svg>
      </div>
      <div class="mm">
        <svg
         
          t="1565749338587"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="7622"
          width="32"
          height="32"
        >
          <path
            d="M325.410859 599.99717c0 0 72.385611 108.681258 216.932728 82.374102 0 0 133.358287-22.237467 152.667052-172.986843 0 0-42.392506 18.912745-32.147164-24.708751 0 0 77.243245-79.170131 88.37784 16.476253 0 0 31.841196 215.935004-224.966705 238.878552C526.27461 740.031507 370.826212 747.418754 325.410859 599.99717z"
            p-id="7623"
          ></path>
          <path
            d="M548.078195 301.314557c19.357883 0 35.049261 18.535145 35.049261 41.400922 0 22.864754-15.691377 41.400922-35.049261 41.400922-19.35686 0-35.047214-18.535145-35.047214-41.400922C513.030981 319.849702 528.721335 301.314557 548.078195 301.314557z"
            p-id="7624"
          ></path>
          <path
            d="M368.814392 300.107055c19.84907 0 35.938514 19.076474 35.938514 42.609447 0 23.531949-16.089443 42.608423-35.938514 42.608423-19.847024 0-35.93749-19.076474-35.93749-42.608423C332.876901 319.182506 348.968391 300.107055 368.814392 300.107055z"
            p-id="7625"
          ></path>
          <path
            d="M504.864998 903.55993c-51.646264 0-101.751429-10.328229-148.923798-30.698163-45.543266-19.666922-86.439698-47.816029-121.553427-83.664491-35.099403-35.83516-62.654992-77.561493-81.903382-124.020618-19.923772-48.092321-30.02585-99.17065-30.02585-151.816684s10.102079-103.724363 30.02585-151.816684c19.24839-46.459125 46.803979-88.186482 81.903382-124.019595 35.113729-35.849486 76.010161-63.99757 121.553427-83.664491 47.172369-20.369933 97.277534-30.698163 148.923798-30.698163 44.929282 0 88.88233 7.867178 130.701784 23.387663 42.391483-17.326621 89.654926-26.107611 140.5552-26.107611 67.237357 0 116.231211 15.329127 118.283963 15.981996 3.898797 1.239224 6.684236 4.680603 7.084349 8.752338s-1.663896 7.988951-5.246491 9.961886c-1.066285 0.589424-105.892749 59.259662-89.549525 118.602212 1.639337 2.146896 3.263323 4.321422 4.846378 6.485715 49.542346 67.74901 75.729775 148.366096 75.729775 233.133711 0 52.646034-10.102079 103.724363-30.026874 151.816684-19.24839 46.459125-46.803979 88.186482-81.903382 124.020618-35.112706 35.848463-76.009138 63.99757-121.552403 83.664491C606.616426 893.231701 556.511261 903.55993 504.864998 903.55993zM504.864998 143.626141c-199.574385 0-361.939309 165.861562-361.939309 369.733832s162.364925 369.733832 361.939309 369.733832c199.574385 0 361.939309-165.862585 361.939309-369.733832 0-80.394005-24.823362-156.833955-71.78493-221.054605-1.855254-2.538823-3.773953-5.092995-5.701862-7.590885-0.737804-0.956791-1.300622-2.035356-1.662873-3.188622-17.835204-56.857962 43.792389-108.053971 77.833693-131.261533-20.084431-4.256954-51.957349-9.357112-89.36533-9.357112-49.671283 0-95.55531 8.770757-136.378064 26.070772-2.438539 1.034563-5.185093 1.081635-7.656377 0.132006C591.465354 151.526065 548.66148 143.626141 504.864998 143.626141z"
            p-id="7626"
          ></path>
        </svg>
      </div>
      <div class="car">
        <svg
        @click='showcar'
          t="1565749891628"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="8811"
          width="32"
          height="32"
        >
          <path
            d="M927.750889 778.143523 317.118498 778.143523c-3.334955 0-9.022491-4.751211-9.775644-11.100826l-59.226916-416.939971L214.859509 158.329005c-7.491625-61.23669-61.442374-109.225657-122.816187-109.225657l-67.609841 0c-12.928451 0-23.38971 10.461259-23.38971 23.38971S11.506055 95.880721 24.433482 95.880721l67.609841 0c38.144762 0 71.720462 29.945009 76.562746 69.299319l33.302477 192.207603 59.043744 415.729399c3.426029 28.573779 28.619828 51.803853 56.166207 51.803853l610.632391 0c12.928451 0 23.38971-10.461259 23.38971-23.38971C951.140599 788.603759 940.679339 778.143523 927.750889 778.143523z"
            p-id="8812"
            fill="#2c2c2c"
          ></path>
          <path
            d="M1005.52523 169.361269c-10.004865-11.329023-23.184025-17.313318-38.0762-17.313318l-630.66361 0c-12.928451 0-23.38971 10.461259-23.38971 23.38971s10.461259 23.38971 23.38971 23.38971l630.66361 0c1.14201 0 1.735527 0.068562 3.01466 1.50733 3.12927 3.540639 5.915733 11.877515 5.070482 19.094894l-62.836117 359.952049c-0.936325 7.515161-9.31925 14.412244-19.163455 14.526855l-488.433258 36.020378c-12.882402 0.936325-22.566972 12.151761-21.60711 25.034163 0.890276 12.311397 11.169387 21.675672 23.297612 21.675672 0.571005 0 1.164522-0.022513 1.735527-0.068562l486.856343-35.951817c31.93227-0.183172 59.935044-24.576745 63.566758-54.362118l62.85863-360.02061C1024.323365 205.380624 1018.064824 183.567829 1005.52523 169.361269z"
            p-id="8813"
            fill="#2c2c2c"
          ></path>
          <path
            d="M851.220888 897.758808c-34.8139 0-63.136969 28.326139-63.136969 63.133899 0 34.787294 28.338419 63.107293 63.136969 63.107293 34.766828 0 63.101153-28.324092 63.101153-63.107293C914.322042 926.084946 886.003066 897.758808 851.220888 897.758808z"
            p-id="8814"
            fill="#2c2c2c"
          ></path>
          <path
            d="M356.148419 897.758808c-34.812877 0-63.136969 28.326139-63.136969 63.133899 0 34.787294 28.338419 63.107293 63.136969 63.107293 34.766828 0 63.102177-28.324092 63.102177-63.107293C419.251619 926.084946 390.930597 897.758808 356.148419 897.758808z"
            p-id="8815"
            fill="#2c2c2c"
           
          ></path>
        </svg>
      </div>
      <div class="fobox" style="font-size:18px;color:#E6FFF5" @click='addcars(tail.id)'>加入购物车</div>
      <div class="money" @click="gobuy()" style="font-size:18px;color:#E6FFF5">
        立即购买
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tail: "",
      num: 1,
      id: ""
    };
  },
  created() {
    (this.id = this.$route.query.id), this.shoptail();
  },
  methods: {
    shoptail() {
      let that = this;
      this.$axios
        .get("/shopTail", {
          params: {
            id: that.id
          }
        })
        .then(function(response) {
          console.log("*********shoptail*********");
          console.log(response);
          console.log("*********that.tail*********");
          that.tail = response.data;
          console.log(that.tail);
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    handleChange(value) {
      console.log(value);
    },
    gobuy() {
      let that = this;
      this.$router.push({
        path: "/order",
        query: {
          id: 1,
          tail: that.tail
        }
      });
    },
   addcars(id) {
      let that = this;
      this.$axios
        .get("buycar", {
          params: {
            goods_id: id,
            num: this.num
          }
        })
        .then(function(response) {
          console.log(response.data);
          if (response.data == "200") {
            that.$message({
              message: "添加购物车成功",
              center: true
            });
          } else {
            that.$message({
              message: "添加购物车失败",
              center: true
            })
          }
        })


  },
  showcar(){
      let that=this
       this.$router.push({
        path: "/car",
        query:{
            sid:this.tail.id
        }
      });
  }
  }
}
</script>
<style>
.tabox {
  width: 100%;
  height: 760px;
  /* background:#9B9FA2;  */
  /* border:solid #C8C7C7; */
}
.taibox {
  width: 100%;
  height: 235px;
  /* background:yellow; */
  text-align: left;
}

.tailbox {
  width: 400px;
  height: 50px;
  border-bottom: dashed;
  border-bottom-color: #c8c7c7;
  /* background: red; */
}

.tailbox span {
  margin-right: 40px;
}

.numbox {
  margin-bottom: 10px;
}

.plbox {
  width: 100%;
  display: flex;
  flex-direction: row;
}

.hlbox {
  margin-left: 50%;
}

.bobox {
  width: 100%;
  height: 50px;
  background: #dbdbdb;
  padding-top: 10px;
  display: flex;
  flex-direction: row;
  position: fixed;
  bottom: 0px;
}

.home {
  width: 10%;
  height: 100%;
  background: #f2f3f4;
}

.homm {
  padding-top: 10px;
}

.mm {
  width: 10%;
  height: 100%;
  background: #f2f3f4;
  padding-top: 10px;
  margin-left: 3px;
}

.car {
  width: 10%;
  height: 100%;
  background: #f2f3f4;
  padding-top: 10px;
  margin-left: 3px;
}

.fobox {
  width: 35%;
  height: 100%;
  background: #707070;
  padding-top: 10px;
}

.money {
  width: 35%;
  height: 40px;
  background: #707070;
  padding-top: 10px;
  background: red;
}

.comm {
  display: flex;
  flex-direction: column;
}

.com {
  width: 100%;
  height: 200px;
  background: pink;
  display: flex;
  flex-direction: column;
}

.coin {
  width: 100%;
  height: 100px;
}
</style>
